
import Taro, {Component} from '@tarojs/taro'
import {View, Text, Image, ScrollView} from '@tarojs/components'
import {inject, observer} from '@tarojs/mobx'
import {getAvatar, getRuntime, pageSize, subtime} from "../../utils/common";

import {IStoreProps} from '../../store/Stores'

import './team.less'

import noneIcon from "../../assets/img/common/none_people.png";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class OrderIndex extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    currentNavId: 2,
    items:[],
    totalCount:0,
    pageIndex:1,
    pageSize,
    shareCount: {},
    vipList: [], // 特权列表
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '我的团队'})
    this.getSpreadUsers()
    // this.getUserShareCount()
    this.getAllPrivilegeTypes()
  }

  getUserShareCount(): void {
    let  { userStore } = this.props.stores
    userStore.getUserShareCount({
      callback: res => { this.setState({ shareCount: res }) }
    })
  }

  getSpreadUsers() {
    let  { userStore } = this.props.stores
    let { currentNavId,pageIndex,pageSize } = this.state
    userStore.getSpreadUsers({
      formPrivilegeId: currentNavId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: res.totalCount, items: res.items})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getSpreadUsers()
      })
    }
  }

  changeCurrentNavId(id:number){
    this.setState({
      currentNavId: id,
      pageIndex: 1,
      items: [],
    }, () => {
      this.getSpreadUsers()
    })
  }

  teamMember(item: object) {
    // 缓存信息给下个页面使用
    getRuntime().setStorage('fatherUser', item)
    getRuntime().navigateTo('/pages/user/team_member?id='+item.id)
  }

  // 获取特权列表
  getAllPrivilegeTypes() {
    let {homeStore} = this.props.stores
    homeStore.getAllPrivilegeTypes({
      callback: res => {
        this.setState({
          vipList: res.items
        })
      }
    })
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  render() {
    let { items, currentNavId,vipList } = this.state
    return (
      <View className='team'>
        <View className='top-column' style={{display: 'none'}}>
          <ScrollView
            className='scroll-column' scrollX scrollWithAnimation
          >
            {
              vipList.map(item => {
                return(
                  <View className={item.id===currentNavId?'scroll-column__title scroll-column__active':'scroll-column__title'} key={item.id} style={{width: '33.33%'}}
                        onClick={this.changeCurrentNavId.bind(this, item.id)}
                  >{item.privilegeName}</View>
                )
              })
            }
          </ScrollView>
        </View>

        <View className='team-main'>
          {items.length<=0&&
          <View className='none'>
             <Image className='none-icon' src={noneIcon} />
             <View className='none-tips'>暂时还没有团队成员哦！</View>
          </View>
          }
          {items.length > 0 &&
          <View className='list-04'>
            {
              items.map(item => {
               return(
                 <View className='list-04__item' >
                   <Image className='list-04__avatar' src={getAvatar(item.avatar)} />
                   <View className='list-04__r'>
                     <View className='list-04__info'>
                       <View className='list-04__title'>{item.userName} </View>
                       <View><Text className='id'>{item.vipLevelView}</Text></View>
                       <View className='list-04__date font-dark'>{subtime(item.creationTime)}</View>
                     </View>
                     {item.vipLevel!=1&&<View className='list-04__num line-link'>{item.teamNum || 0}个成员</View>}
                   </View>
                 </View>
               )
              })
            }
          </View>
          }
        </View>
        <View className='footer-block' />
        <View className='page-submit' onClick={this.link.bind(this,'/pages/share/index')}>+ 邀请合伙人</View>
      </View>
    )
  }
}

export default OrderIndex

